<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <div class="issues-wrap">
      <div class="err-title">失败原因</div>
      <json-viewer boxed copyable theme="my-json-theme" :value="errMsg" class="err-content"/>
      <!-- <el-input
        v-model="errMsg"
        class="err-content"
        :rows="6"
        type="textarea"
        placeholder=""
      /> -->
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary">确定</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
/** 查看失败原因 弹窗 */
defineOptions({ name: 'ViewIssues' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = '查看失败原因' // 弹窗的标题
let errMsg = ref('')

/** 打开弹窗 */
const open = async (msg: string) => {
  dialogVisible.value = true
  errMsg.value = msg
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const submitForm = async () => {
  dialogVisible.value = false
}
</script>
<style lang="scss" scoped>
.issues-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 30px;
  .err-title {
    width: 80px;
    font-size: 14px
  }
  .err-content{
    flex: 1;
  }
}
</style>